<template>
  <div class="bg-body">
    <my-header></my-header>
    <div class="content">
      <div class="register">
        <div class="form">
          <h1>图书管理员注册</h1>
          <el-form ref="formValidate"
                   :model="formValidate"
                   :rules="ruleValidate"
                   label-width="80px">
            <el-form-item label="用户名"
                          prop="name">
              <el-input v-model="formValidate.name"
                        placeholder="输入用户名"></el-input>
            </el-form-item>
            <el-form-item label="密码"
                          prop="password">
              <el-input v-model="formValidate.password"
                        placeholder="输入密码"></el-input>
            </el-form-item>
            <el-form-item label="确认密码"
                          prop="password2">
              <el-input v-model="formValidate.password2"
                        placeholder="确认密码"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button class="submit-btn"
                         type="primary"
                         @click="handleSubmit('formValidate')">注册</el-button>
            </el-form-item>
            <el-form-item style="text-align: center">
              <router-link to="/login">已有账号？登录</router-link>
            </el-form-item>
          </el-form>
        </div>
      </div>

    </div>
  </div>
</template>
<script>
import myHeader from '@/components/layout/header1.vue';

export default {
  data () {
    let validatePass2 = (rule, value, callback) => {
      if (value !== this.formValidate.password) {
        callback(new Error('两次输入密码不一致!'));
      } else {
        callback();
      }
    };

    return {
      passwordMadal: false,
      formValidate: {
        name: '',
        password: '',
        password2: '',
      },
      ruleValidate: {
        name: [
          { required: true, message: '请输入用户名', trigger: 'blur' },
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { type: 'string', min: 6, message: '请设置至少6位密码', trigger: 'blur' }
        ],
        password2: [
          { required: true, message: '请再次输入密码', trigger: 'blur' },
          { validator: validatePass2, trigger: 'blur' }
        ],
      }
    }
  },
  methods: {
    //提交表单
    handleSubmit (name) {
      this.$refs[name].validate((valid) => {
        if (valid) {
          this.$router.push({ path: '/login' });
        } else {
        }
      })
    },
  },
  components: {
    myHeader,
  }
}
</script>
<style scoped lang="scss">
.bg-body {
  background: url("../../../static/register.png") no-repeat;
  background-size: cover;
  padding-top: 100px;
  overflow: hidden;
  .content {
    min-height: 700px;
    width: 400px;
    padding-top: 40px;
    background: #ffffff;
    float: right;
  }
}
.register {
  position: relative;
  width: 350px;
  margin: 0 auto;
  .item-content {
    display: flex;
    justify-content: space-between;
  }
}
.submit-btn {
  width: 100%;
}
</style>
